<template>
  <!-- 表单 -->
  <el-form label-width="120px" ref="form" :model="form">
    <el-form-item label="消防箱编号：" prop="id">
      <el-input v-model="form.id" placeholder="请输入消防柜编号"></el-input>
      <el-button>取消</el-button>
      <el-button type="primary" @click="select">确认</el-button>
    </el-form-item>
    <el-form-item label="当前日期：" prop="time">{{ nowTime }}</el-form-item>
    <el-form-item label="枪头:" prop="qiangtou">
      <el-radio v-model="form.qiangtou" label="1">正常</el-radio>
      <el-radio v-model="form.qiangtou" label="0">损坏</el-radio>
    </el-form-item>
    <el-form-item label="水带:" prop="shuidai">
      <el-radio v-model="form.shuidai" label="1">正常</el-radio>
      <el-radio v-model="form.shuidai" label="0">损坏</el-radio>
    </el-form-item>
    <el-form-item label="箱体:" prop="box">
      <el-radio v-model="form.box" label="1">正常</el-radio>
      <el-radio v-model="form.box" label="0">损坏</el-radio>
    </el-form-item>
    <el-form-item label="阀门:" prop="famen">
      <el-radio v-model="form.famen" label="1">正常</el-radio>
      <el-radio v-model="form.famen" label="0">损坏</el-radio>
    </el-form-item>
    <el-form-item label="灭火器:" prop="mhq">
      <el-radio v-model="form.mhq" label="1">正常</el-radio>
      <el-radio v-model="form.mhq" label="0">损坏</el-radio>
    </el-form-item>
    <el-form-item label="消防报警器:" prop="xfsbjq">
      <el-radio v-model="form.xfsbjq" label="1">正常</el-radio>
      <el-radio v-model="form.xfsbjq" label="0">损坏</el-radio>
    </el-form-item>
    <el-form-item label="备注:" prop="remark">
      <el-input type="textarea" v-model="form.remark"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  <!-- 表单 -->
</template>

<script>
export default {
  data() {
    return {
      nowTime: "",

      form: {
        id: "",
        qiangtou: "",
        shuidai: "",
        famen: "",
        xfsbjq: "",
        mhq: "",
        // mhqManufactureDate: "",
        box: "",
        date: "",
        remark: "",
        confirm: "",
        address: "",
        contacts: "",
      },
    };
  },
  methods: {
    
    select() {
      this.axios("http://localhost:3000/test?id=" + this.form.id).then(
        (response) => {
          // console.log(response.data);
          // console.log(this.input);
          if (response.data.length != 0) {
            response.data.forEach((element) => {
              //console.log(element);
              this.form = element;
            });

            this.$message({
              type: "info",
              message: "查询成功",
            });
          } else {
            alert("编号输入错误，请重新输入");
          }
          // response.data.forEach((element) => {
          //     console.log(element)
          //   if (this.input === element.id) {
          //     alert("查询成功");
          //     return;(为什么没有用)
          //   } else {
          //     alert("编号输入错误");
          //   }
          // });
        }
      );
    },
    // 修改
    onSubmit(form) {
      // console.log(this.input);
      //console.log(this.form);
      // console.log(this.form.remark);
      // console.log(this.form.mhq);
      this.axios
        .put("http://localhost:3000/test/" + this.form.id, {
          id: this.form.id,
          qiangtou: this.form.qiangtou,
          shuidai: this.form.shuidai,
          famen: this.form.famen,
          xfsbjq: this.form.xfsbjq,
          mhq: this.form.mhq,
          //mhqManufactureDate: this.from.mhqManufactureDate,
          box: this.form.box,
          date: this.nowTime,
          remark: this.form.remark,
          confirm: this.form.confirm,
          address: this.form.address,
          contacts: this.form.contacts,
        })
        .then((response) => {
          this.$message({
            type: "info",
            message: "检查完毕",
          });
          this.form = {
            id: "",
            qiangtou: "",
            shuidai: "",
            famen: "",
            xfsbjq: "",
            mhq: "",
            // mhqManufactureDate: "",
            box: "",
            date: "",
            remark: "",
            confirm: "",
            address: "",
            contacts: "",
          };
        });
    },
    // 点击变化
    agreeChange() {},

    // 时间
    getTime() {
      setInterval(() => {
        //new Date();  new一个Data对象，当前时间日期
        //toLocaleString()方法可根据本地时间把Data对象转化为字符串
        // this.nowTime=new Date().getDate().toLocaleString();
        let t = new Date();
        this.nowTime =
          t.getFullYear() +
          "年" +
          (t.getMonth() + 1) +
          "月" +
          t.getDate() +
          "日";
      }, 50);
    },
  },

  created() {
    this.getTime();
  },
};
</script>

<style>
</style>